<template>
  <EmptyStatus
    v-if="!arrangedData || arrangedData.length == 0"
    modelName="进离港流量"
  />
  <div v-else>
    <!-- Config -->

    <!-- Chart -->
    <transition name="el-fade-in" mode="out-in">
      <!-- <div v-if="showChart"> -->
      <el-scrollbar
        v-if="showChart"
        @scroll="handleScroll"
        ref="scrollbar"
        @wheel="handleMouseWheel"
      >
        <!-- <div style="padding: 24px"> -->
        <v-chart
          :style="{
            margin: '24px',
            width: chartWidth + 'px',
            height: chartHeight + 'px',
          }"
          :option="option"
          ref="chart"
          @click="handleChartClick"
        />
        <!-- :init-options="{ width: chartWidth, height: chartHeight }" -->
        <!-- </div> -->
      </el-scrollbar>
      <!-- </div> -->
    </transition>
    <ColumnDetail ref="columnDetail" />
    <SnapshotLoader ref="snapshotLoader" />
    <ConfigBar
      @chartRefresh="chartRefresh"
      @handleTypeChange="handleTypeChange"
      @handleGranularityChange="handleGranularityChange"
      @handleIntervalChange="handleIntervalChange"
      @handleStepChange="handleStepChange"
    />
    <ConfigBox
      @chartRefresh="chartRefresh"
      @handleTypeChange="handleTypeChange"
      @handleGranularityChange="handleGranularityChange"
      @handleIntervalChange="handleIntervalChange"
      @handleStepChange="handleStepChange"
    />
    <!-- <ToolboxWindow title="alertCurves" :show="true">
      <pre>{{ alertCurves }}</pre>
    </ToolboxWindow> -->
  </div>
</template>

<script setup>
// import echarts
// import { use } from "echarts/core";
import * as echarts from "echarts/core";
// import * as echarts from "echarts/core";
import "echarts/lib/component/polar";
import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
import {
  BarChart,
  LineChart,
  ScatterChart,
  EffectScatterChart,
} from "echarts/charts";
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PolarComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";

// import vue echarts
import VChart, { THEME_KEY } from "vue-echarts";

// import vue apis
import { ref, computed, nextTick, watch, onMounted, onUnmounted, h } from "vue";

// import stores
import useFlowStore from "@/store/flow.js";
import useCommonStore from "@/store/common.js";

// import utils
import debounce from "@/utils/debounce.js";
import throttle from "@/utils/throttle.js";
import { cumulate, arrange, policyCompute } from "../../utils";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";

// empty
import EmptyStatus from "../../EmptyStatus/index.vue";

// columnDetail
import ColumnDetail from "./ColumnDetail.vue";

// SnapshotLoader
import SnapshotLoader from "../../SnapshotLoader/index.vue";

// ConfigComponents
import ConfigBox from "./ConfigBox.vue";
import ConfigBar from "./ConfigBar.vue";

// fetchAlertCurves
import fetchAlertCurves from "./fetchAlertCurves.js";

echarts.use([
  CanvasRenderer,
  // SVGRenderer,
  BarChart,
  LineChart,
  ScatterChart,
  EffectScatterChart,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PolarComponent,
  LabelLayout,
  UniversalTransition,
]);

const flowStore = useFlowStore();
const commonStore = useCommonStore();

// const alertCurves = computed(() => fetchAlertCurves());

// chart setting
const chart = ref();
// const theme = ref(commonStore.darkMode ? "dark" : "light");
const showChart = ref(true);
const config = flowStore.chartConfig.gnenralChart;
const chartForeColor = computed(() => (commonStore.darkMode ? "#fff" : "#000"));
const chartCenter = computed(() => {
  let width = parseInt(chartWidth.value.trim("px"));
  let height = parseInt(chartHeight.value.trim("px"));
  let left = Math.max(50, ((width - 240) / width) * 50);
  // let top = Math.min(50, (height / width) * 50, (width / height) * 50);
  let top = Math.min(50, (width / height) * 50);

  return [left + "%", top + "%"];
});
const chartWidth = computed(() => {
  if (config.chartPolar) {
    if (
      !commonStore.clientHeight ||
      commonStore.clientHeight == 0 ||
      !commonStore.getClientWidth ||
      commonStore.getClientWidth == 0
    ) {
      //default chart width for polar
      return "100%";
    } else {
      //chart width for polar
      return Math.min(
        commonStore.clientHeight * (config.chartSize / 96) + 240,
        commonStore.getClientWidth -
          (commonStore.showSidebar ? commonStore.sidebarWidth : 0) -
          120
      );
    }
  }
  //default chart width for grid lines / bars
  return arrangedData.value.length * config.chartSize + 120;
});

const chartHeight = computed(() => {
  if (config.chartPolar) {
    return commonStore.clientHeight * (config.chartSize / 96);
  } else {
    return commonStore.clientHeight - 203;
  }
});

onMounted(() => {
  window.addEventListener("resize", function () {
    chart.value.resize();
  });
});

const chartRefresh = async () => {
  chart.value.resize();
  showChart.value = false;
  await nextTick();
  showChart.value = true;
};

const handleTypeChange = () => {
  if (config.chartType == "bar") {
    config.showTotal = true;
    config.chartStack = true;
    config.chartSmooth = false;
  } else if (config.chartType == "line") {
    config.showTotal = false;
    config.chartStack = true;
    config.chartSmooth = true;
    config.chartFill = true;
  } else {
    config.showTotal = false;
    config.chartStack = false;
  }
  chartRefresh();
};

// data setting
const handleGranularityChange = () => {
  if (config.dataGranularity == 5) {
    config.dataStep = 4;
    config.dataInterval = 2;
  } else {
    config.dataStep = config.dataGranularity;
    config.dataInterval = config.dataGranularity;
  }

  if (config.dataInterval == 4) {
    config.showSector = true;
  } else {
    config.showSector = false;
  }
  chartRefresh();
};
const handleIntervalChange = () => {
  if (config.dataInterval > config.dataStep) {
    config.dataStep = config.dataInterval;
  }
  if (config.dataInterval == 2 && config.dataStep == 4) {
    // BKB
    config.dataGranularity = 5;
  } else if (config.dataInterval != config.dataStep) {
    config.dataGranularity = 0;
  } else {
    config.dataGranularity = config.dataInterval;
  }
  if (config.dataInterval == 4) {
    config.showSector = true;
  } else {
    config.showSector = false;
  }
  chartRefresh();
};
const handleStepChange = () => {
  if (config.dataInterval > config.dataStep) {
    config.dataInterval = config.dataStep;
  }
  if (config.dataInterval == 2 && config.dataStep == 4) {
    // BKB
    config.dataGranularity = 5;
  } else if (config.dataInterval != config.dataStep) {
    config.dataGranularity = 0;
  } else {
    config.dataGranularity = config.dataStep;
  }
  if (config.dataInterval == 4) {
    config.showSector = true;
  } else {
    config.showSector = false;
  }
  chartRefresh();
};

const arrangedData = computed(() => {
  let rawData = flowStore.rawData;
  let tags = flowStore.tags;
  let begTime = flowStore.begTime;
  if (!rawData || rawData.length == 0) return [];
  let cumulatedRawData = cumulate(
    rawData,
    config.dataInterval,
    config.dataStep
  );

  // 原版本中仅包括airport和type级别
  // 加入point级别，用于识别天府出BOKIR @2023/05/13
  let arrangedData = arrange(
    cumulatedRawData,
    tags,
    begTime,
    config.dataInterval,
    ["airport", "type", "point"]
  );
  arrangedData = policyCompute(arrangedData, config.dataStep);

  if (config.dataInterval == 2) {
    return arrangedData.slice(5, arrangedData.length);
  } else if (config.dataInterval == 1) {
    return arrangedData.slice(14, arrangedData.length);
  } else {
    return arrangedData;
  }
});

const computedSymbolSize = (value) => {
  if (config.chartType == "line") {
    return 4;
  } else {
    // return Math.max(value * 4, 12);
    return value * 4;
  }
};

// handle scrolling events
const scrollPotition = ref({
  left: 0,
  top: 0,
});

function setScrollPotition({ scrollLeft, scrollTop }) {
  scrollPotition.value.left = Math.round(scrollLeft);
  scrollPotition.value.top = Math.round(scrollTop);
  // window.console.log("generalChartScrolling:", scrollPotition.value);
}

const scrollbar = ref();
const handleMouseWheel = (e) => {
  // console.log("handleMouseWheel", e);
  // scrollbar.value.setScrollLeft();
  // e.preventDefault();
  const wheelDelta = e.wheelDelta || -e.deltaY * 40;
  scrollbar.value.setScrollLeft(
    scrollbar.value.wrapRef.scrollLeft - wheelDelta
  );
};

const handleScroll = ({ scrollLeft, scrollTop }) => {
  // console.log("handleScroll", { scrollLeft, scrollTop });
  // throttle(setScrollPotition({ scrollLeft, scrollTop }), 300, false);
  setScrollPotition({ scrollLeft, scrollTop });
};

const handleChartClick = (e) => {
  // console.log("handleChartClick", e);
  // console.log(arrangedData.value);
  columnDetail.value.open(arrangedData.value[e.dataIndex]);
  return false;
};

const option = computed(() => {
  // alertCurves
  let alertCurves = fetchAlertCurves();
  let warningCurve = alertCurves.warningCurve;
  let dangerCurve = alertCurves.dangerCurve;
  if (config.dataInterval == 2) {
    warningCurve = warningCurve.slice(5, warningCurve.length);
    dangerCurve = dangerCurve.slice(5, dangerCurve.length);
  } else if (config.dataInterval == 1) {
    warningCurve = warningCurve.slice(14, warningCurve.length);
    dangerCurve = dangerCurve.slice(14, dangerCurve.length);
  }

  // console.log("arrangedData", arrangedData);
  if (arrangedData.length == 0) return null;
  let momentList = new Array();
  let ZUUU_DEP = new Array();
  let ZUUU_ARR = new Array();
  let ZUTF_DEP = new Array();
  let ZUTF_ARR = new Array();
  let ZUMY_DEP = new Array();
  let ZUMY_ARR = new Array();
  let other = new Array();
  let total = new Array();
  let sector = new Array();

  // chart config
  let itemStyle = {
    borderRadius: 10,
    borderColor: commonStore.darkMode
      ? "rgba(255,255,255,0.5)"
      : "rgba(0,0,0,0.3)",
    borderWidth: 2,
  };
  let labelConfig = {
    show: true,
    formatter: (item) => (item.value == 0 ? "" : item.value),
    color: commonStore.darkMode ? "#fff" : "#000",
    textBorderColor: commonStore.darkMode ? "#0006" : "#fff8",
    textBorderWidth: 1,
    textShadowColor: commonStore.darkMode ? "#000" : "#fff",
    textShadowBlur: 4,
    textShadowOffsetY: 1,
    fontSize: "14px",
    fontWeight: "bold",
  };
  let emphasisConfig = {
    disabled: false,
    // scale: true,
    // focus:'none',
    // focus: "self",
    focus: config.chartEmphasis ? "series" : "none",
  };
  let barOpacity = 0.9;
  let barMinHeight = 20;
  // ----------------------------------------------------------------
  // overload warning label style
  // added @20230708

  // line: total
  let warningLineLabelStyle = {
    color: commonStore.darkMode ? "#ea5c2b" : "#ea5c2b",
    fontSize: "24px",
  };

  // bar: zutf arrival
  let warningBarLabelStyle = {
    color: commonStore.darkMode ? "#f2317f" : "#f2317f",
    fontSize: "24px",
  };

  // ----------------------------------------------------------------

  let src = arrangedData.value;
  for (let i = 0; i < src.length; i++) {
    let cell = src[i];
    // added snapshotsupport
    let currentColor =
      flowStore.loaderType == "snapshot" ? "#E6A23C" : "#67C23A";
    let passedColor = "#909399";
    let futureColor =
      flowStore.loaderType == "snapshot" ? "#CFD3DC" : "#409EFF";
    let dayObj =
      flowStore.loaderType == "snapshot"
        ? dayjs(
            flowStore.loaderConfig.snapshot.content[
              flowStore.loaderConfig.snapshot.pointer
            ].snapTime
          )
        : dayjs();
    let diff = dayObj.diff(cell.timestamp, "minute");
    let passed = diff < 0 ? 1 : diff > config.dataStep * 15 ? -1 : 0;
    let dark = commonStore.darkMode;
    // console.log(
    //   "chart option : momentList",
    //   cell.moment,
    //   cell.timestamp,
    //   diff,
    //   passed
    // );
    let start = dayjs(cell.timestamp);
    let end = dayjs(cell.timestamp).add(config.dataStep * 15, "minute");
    momentList.push({
      value: `${start.format("HHmm")} +${config.dataStep * 15}`,
      // value: `${start.format("HHmm")}~${end.format("HHmm")}`,
      // value: start.format("HHmm"),
      textStyle: {
        color:
          passed === 1
            ? futureColor
            : passed === 0
            ? currentColor
            : passedColor,
        // fontWeight: passed === 0 ? "bold" : "normal",
        opacity: passed === 0 ? 1 : 0.9,
        overflow: "break",
      },
    });
    ZUUU_DEP.push({
      value: cell.airport.ZUUU.type.DEP.total,
      itemStyle: {
        opacity: cell.airport.ZUUU.type.DEP.total == 0 ? 0 : barOpacity,
      },
    });
    ZUUU_ARR.push({
      value: cell.airport.ZUUU.type.ARR.total,
      itemStyle: {
        opacity: cell.airport.ZUUU.type.ARR.total == 0 ? 0 : barOpacity,
      },
    });
    ZUTF_DEP.push({
      value: cell.airport.ZUTF.type.DEP.total,
      itemStyle: {
        opacity: cell.airport.ZUTF.type.DEP.total == 0 ? 0 : barOpacity,
      },
    });
    ZUTF_ARR.push({
      value: cell.airport.ZUTF.type.ARR.total,
      itemStyle: {
        opacity: cell.airport.ZUTF.type.ARR.total == 0 ? 0 : barOpacity,
      },
      // label:
      //   cell.airport.ZUTF.type.ARR.total >= 43 ? warningBarLabelStyle : null,
    });
    ZUMY_DEP.push({
      value: cell.airport.ZUMY.type.DEP.total,
      itemStyle: {
        opacity: cell.airport.ZUMY.type.DEP.total == 0 ? 0 : barOpacity,
      },
    });
    ZUMY_ARR.push({
      value: cell.airport.ZUMY.type.ARR.total,
      itemStyle: {
        opacity: cell.airport.ZUMY.type.ARR.total == 0 ? 0 : barOpacity,
      },
    });
    let other_val =
      cell.airport.ZULZ.total +
      cell.airport.ZUYB.total +
      cell.airport.ZUNC.total +
      cell.airport.OTHER.total;
    other.push({
      value: other_val,
      itemStyle: { opacity: other_val == 0 ? 0 : barOpacity },
    });
    total.push({
      value: cell.total,
      // label: cell.total >= 125 ? warningLineLabelStyle : null,
    });
    sector.push(cell.sectorRequire);
  }

  return {
    grid: {
      x: 30,
      y: 60,
      x2: 40,
      y2: 20,
      // x: 60,
      // y: 120,
      // x2: 60,
      // y2: 60,
    },
    tooltip: {
      show: true,
      trigger: "axis",
      // trigger: "item",
      axisPointer: { type: "cross" },
    },
    // legend: {
    //   orient: config.chartPolar ? "vertical" : "horizontal",
    //   left: config.chartPolar ? 0 : scrollPotition.value.left + 60,
    //   top: config.chartPolar ? 64 : 0,
    //   data: [
    //     "ZUUU离港",
    //     "ZUUU进港",
    //     "ZUTF离港",
    //     "ZUTF进港",
    //     "ZUMY离港",
    //     "ZUMY进港",
    //     "其他",
    //     "合计",
    //     "扇区建议",
    //   ],
    //   selected: { 合计: config.showTotal, 扇区建议: config.showSector },
    //   textStyle: {
    //     color: "#888",
    //   },
    // },
    polar: config.chartPolar
      ? [
          { id: 0, center: chartCenter.value },
          { id: 1, center: chartCenter.value },
        ]
      : null,
    xAxis: config.chartPolar ? null : { type: "category", data: momentList },
    yAxis: config.chartPolar
      ? null
      : [
          {
            id: 0,
            type: "value",
            name: "架次",
            position: "left",
            axisLine: { show: true },
            // boundaryGap: false,
          },
          {
            id: 1,
            type: "value",
            name: "扇区建议",
            // min: 0,
            // max: maxSector,
            position: "right",
            axisLine: { show: true },
            splitLine: { show: false },
            axisLabel: {
              formatter: "{value} 扇",
            },
            // boundaryGap: false,
          },
          {
            id: 2,
            type: "value",
            name: "提醒",
            min: 0,
            max: 1,
            position: "right",
            axisLine: { show: false },
            splitLine: { show: false },
            // boundaryGap: false,
          },
        ],
    angleAxis: config.chartPolar
      ? [
          {
            polarIndex: 0,
            type: "category",
            data: momentList,
          },
          {
            polarIndex: 1,
            type: "category",
            data: momentList,
          },
        ]
      : null,
    radiusAxis: config.chartPolar
      ? [
          {
            polarIndex: 0,
            type: "value",
            name: "架次",
            nameGap: 24,
          },
          {
            polarIndex: 1,
            type: "value",
            name: "扇区建议",
            nameGap: 40,
            // min: 0,
            // max: maxSector,
            axisLine: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
            // axisLabel: {
            //   formatter: "{value} 扇",
            // },
          },
          {
            polarIndex: 2,
            type: "value",
            name: "提醒",
            nameGap: 40,
            min: 0,
            max: 1,
            axisLine: { show: false },
            splitLine: { show: false },
            axisLabel: { show: false },
          },
        ]
      : null,
    series: [
      // config.chartType == "bar" ? null : null,

      {
        name: "扇区建议",
        data: sector,
        type: "line",
        step: true,
        // smooth: true,
        yAxisIndex: 1,
        polarIndex: 1,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        emphasis: emphasisConfig,
        label: {
          show: true,
          color: chartForeColor.value,
          fontSize: "14px",
          fontWeight: "bold",
          formatter: "{c}扇",
          distance: 2,
          offset: [20, 0],
          rotate: 45,
          // backgroundColor: (params) =>
          //   src[params.dataIndex].smoothed
          //     ? "#0066CC"
          //     : commonStore.darkMode
          //     ? "rgba(0,0,0,0.5)"
          //     : "rgba(255,255,255,0.5)",
          backgroundColor: commonStore.darkMode
            ? "rgba(0,0,0,0.5)"
            : "rgba(255,255,255,0.5)",
          borderColor: chartForeColor.value,
          borderWidth: 1,
          borderRadius: 12,
          padding: [3, 6],
        },
        lineStyle: {
          opacity: config.showSectorLine ? 1 : 0,
          color: commonStore.darkMode ? "#fff3" : "#0003",
          width: 10,
        },
        itemStyle: {
          color: commonStore.darkMode ? "#fff8" : "#0008",
        },
        symbol: "circle",
        symbolSize: 20,
        clip: false,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "合计",
        data: total,
        type: "line",
        yAxisIndex: 0,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        smooth: config.chartSmooth,
        emphasis: emphasisConfig,
        label: {
          show: true,
          color: commonStore.darkMode ? "#000" : "#FFF",
          textBorderColor: commonStore.darkMode
            ? "rgba(255,255,255,0.75)"
            : "rgba(0,0,0,0.75)",
          textBorderWidth: 2,
          fontSize: "16px",
          fontWeight: "bold",
          distance: 10,
        },
        lineStyle: {
          color: commonStore.darkMode
            ? "rgba(255,255,255,0.5)"
            : "rgba(0,0,0,0.3)",
          // type: "dotted",
          opacity: config.showTotalLine ? 1 : 0,
        },
        itemStyle: {
          color: "#ABB2B9",
        },
        clip: false,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "ZUUU离港",
        data: ZUUU_DEP,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#3498DB",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill
          ? {
              opacity: 0.8,
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: "rgb(0, 221, 255)",
              //   },
              //   {
              //     offset: 1,
              //     color: "rgb(77, 119, 255)",
              //   },
              // ]),
            }
          : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "ZUUU进港",
        data: ZUUU_ARR,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#E67E22",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill
          ? {
              opacity: 0.8,
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: "rgb(224, 96, 76)",
              //   },
              //   {
              //     offset: 1,
              //     color: "rgb(255, 191, 0)",
              //   },
              // ]),
            }
          : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "ZUTF离港",
        data: ZUTF_DEP,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#2ECC71",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill
          ? {
              opacity: 0.8,
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: "rgb(128, 255, 128)",
              //   },
              //   {
              //     offset: 1,
              //     color: "rgb(1, 192, 192)",
              //   },
              // ]),
            }
          : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "ZUTF进港",
        data: ZUTF_ARR,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#F1C40F",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill
          ? {
              opacity: 0.8,
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: "rgb(255, 233, 0)",
              //   },
              //   {
              //     offset: 1,
              //     color: "rgb(192, 128, 64)",
              //   },
              // ]),
            }
          : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "ZUMY离港",
        data: ZUMY_DEP,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#9B59B6",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill
          ? {
              opacity: 0.8,
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: "rgb(64, 96, 255)",
              //   },
              //   {
              //     offset: 1,
              //     color: "rgb(128, 12, 219)",
              //   },
              // ]),
            }
          : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "ZUMY进港",
        data: ZUMY_ARR,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        polarIndex: 0,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#E74C3C",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill
          ? {
              opacity: 0.8,
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              //   {
              //     offset: 0,
              //     color: "rgb(255, 64, 64)",
              //   },
              //   {
              //     offset: 1,
              //     color: "rgb(192, 0, 96)",
              //   },
              // ]),
            }
          : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "其他",
        data: other,
        barMinHeight: barMinHeight,
        type: config.chartType,
        smooth: config.chartSmooth,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        yAxisIndex: 0,
        stack: config.chartStack ? "x" : "",
        polarIndex: 0,
        symbolSize: (value) => computedSymbolSize(value),
        rippleEffect: { brushType: "stroke" },
        label: labelConfig,
        emphasis: emphasisConfig,
        itemStyle: {
          color: "#5D6D7E",
          opacity: barOpacity,
          ...itemStyle,
        },
        areaStyle: config.chartFill ? {} : null,
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
        barWidth: config.chartSize * 0.8,
        barGap: 0,
        barCategoryGap: 0,
      },
      {
        name: "接近上限",
        data: warningCurve,
        type: "line",
        step: true,
        z: 1,
        yAxisIndex: 2,
        polarIndex: 2,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        silent: true,
        emphasis: { disabled: true, focus: "none" },
        label: { show: false },
        lineStyle: { opacity: 0 },
        itemStyle: {
          opacity: 0,
          color: "#E6A23C",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#a77730" : "#eebe77",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#292218" : "#fdf6ec",
            },
          ]),
        },
        symbol: "none",
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
      {
        name: "超量",
        data: dangerCurve,
        type: "line",
        step: true,
        z: 1,
        yAxisIndex: 2,
        polarIndex: 2,
        coordinateSystem: config.chartPolar ? "polar" : "cartesian2d",
        silent: true,
        emphasis: { disabled: true, focus: "none" },
        label: { show: false },
        lineStyle: { opacity: 0 },
        itemStyle: {
          opacity: 0,
          color: "#F56C6C",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: commonStore.darkMode ? "#b25252" : "#f89898",
            },
            {
              offset: 1,
              color: commonStore.darkMode ? "#2b1d1d" : "#fef0f0",
            },
          ]),
        },
        symbol: "none",
        animationDelay: function (idx) {
          return idx * 50 + 100;
        },
      },
    ],
    darkMode: commonStore.darkMode,
    animationEasing: "elasticOut",
    animationDelayUpdate: function (idx) {
      return idx * 5;
    },
  };
});

onMounted(() => {
  window.onresize = function () {
    chart.value ? chart.value.resize() : null;
  };
});

const columnDetail = ref();
</script>
